<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="汉语拼音在线学习平台，提供标准拼音发音、声母韵母表、整体认读音节等学习资源，是学习汉语拼音的最佳工具！">
    <meta name="keywords" content="汉语拼音,拼音学习,在线读拼音,拼音发音,声母表,韵母表,整体认读音节">
    <title>汉语拼音在线学习平台 | 标准发音点读工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --accent: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4ade80;
            --warning: #facc15;
            --danger: #f87171;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        /* 字体设置 */
        @font-face {
            font-family: pinyin;
            src: url('/i/pinyin.ttf');
        }

        .pymp3,
        .py {
            font-family: pinyin;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'pinyin', 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--dark);
            min-height: 100vh;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header Styles */
        header {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            padding: 20px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .logo-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: var(--shadow);
            font-size: 2rem;
            color: var(--primary);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .logo p {
            font-size: 1rem;
            opacity: 0.9;
        }

        .nav-menu {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .nav-btn {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.15);
            font-size: 1rem;
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        .nav-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        .nav-btn:hover::before {
            transform: translateX(0);
        }

        .nav-btn.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        /* Main Content */
        .main-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            padding: 30px 0;
        }

        /* 总进度条样式 */
        .total-progress {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 20px 25px;
            margin-bottom: 30px;
        }

        .total-progress h3 {
            font-size: 1.3rem;
            color: var(--secondary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .total-progress h3 i {
            color: var(--accent);
        }

        .progress-container {
            width: 100%;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .progress-bar {
            height: 12px;
            background: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, var(--accent), var(--primary));
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 30px;
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary);
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .card-title i {
            color: var(--accent);
            font-size: 1.8rem;
        }

        .section-desc {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(67, 97, 238, 0.05);
            border-radius: var(--border-radius);
            font-size: 1.1rem;
        }

        /* 拼音网格布局 - 纯CSS控制自适应列数 */
        .pinyin-grid {
            display: grid;
            gap: 15px;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        }





        /* 4 列 */
        .grid-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        /* 5 列 */
        .grid-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        /* 6 列 */
        .grid-6 {
            grid-template-columns: repeat(6, 1fr);
        }

        .pinyin-btn {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 20px;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            border-radius: var(--border-radius);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: var(--transition);
            overflow: hidden;
            border: none;
        }

        .pinyin-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .pinyin-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .pinyin-btn:hover::before {
            transform: scaleX(1);
        }

        .pinyin-btn:active {
            transform: translateY(0);
        }

        .pinyin-char {
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 8px;
            transition: var(--transition);
        }



        /* 大屏幕：每行6个 */
        @media (min-width: 1024px) {
            .pinyin-char {
                font-size: 4rem;
            }
        }

        /* 中等屏幕：每行5个 */
        @media (max-width: 1023px) and (min-width: 768px) {
            .pinyin-char {
                font-size: 3rem;
            }
        }

        /* 小屏幕：每行4个 */
        @media (max-width: 767px) and (min-width: 480px) {
            .pinyin-char {
                font-size: 2rem;
            }
        }


        /* 超小屏幕：每行3个 */
        @media (max-width: 479px) {
            .pinyin-char {
                font-size: 1rem;
            }
        }


        .pinyin-btn:hover .pinyin-char {
            color: var(--primary);
            transform: scale(1.1);
        }

        .pinyin-text {
            font-size: 1rem;
            color: var(--dark);
            opacity: 0.9;
        }

        .pinyin-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--accent);
            font-size: 1.2rem;
        }

        /* 学习状态指示器 */
        .learned-indicator {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20px;
            height: 20px;
            background: var(--success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }

        .learned .learned-indicator {
            opacity: 1;
            transform: scale(1);
        }

        /* Sidebar */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .info-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 25px;
        }

        .info-card h3 {
            font-size: 1.4rem;
            color: var(--secondary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary);
        }

        .info-list {
            list-style: none;
        }

        .info-list li {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .info-list li:last-child {
            border-bottom: none;
        }

        .info-list i {
            color: var(--accent);
            margin-top: 4px;
        }

        .quick-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .quick-link {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background: rgba(67, 97, 238, 0.05);
            border-radius: 8px;
            color: var(--dark);
            text-decoration: none;
            transition: var(--transition);
            gap: 10px;
        }

        .quick-link:hover {
            background: rgba(67, 97, 238, 0.1);
            transform: translateX(5px);
        }

        .quick-link i {
            color: var(--primary);
        }

        /* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h4 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: var(--accent);
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-link {
            display: inline-block;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-link:hover {
            background: var(--primary);
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* Audio Player */
        #player {
            display: none;
        }

        /* Animation */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateX(0px);
            }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        /* 学习进度提示 */
        .progress-popup {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--success);
            color: white;
            padding: 15px 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            z-index: 1000;
            transform: translateX(120%);
            transition: transform 0.5s ease;
        }

        .progress-popup.show {
            transform: translateX(0);
        }

        /* Responsive */
        @media (min-width: 768px) {
            .main-content {
                grid-template-columns: 1fr 350px;
            }

            .header-container {
                flex-wrap: nowrap;
            }

            .logo {
                margin-bottom: 0;
            }

            .card-header {
                flex-wrap: nowrap;
            }

            .card-title {
                margin-bottom: 0;
            }
        }
    </style>
</head>

<body>
    <!-- 学习进度提示 -->
    <div class="progress-popup">
        <i class="fas fa-check-circle"></i> 学习进度已更新！
    </div>

    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="logo-text">
                    <h1>汉语拼音在线学习</h1>
                    <p>标准拼音发音点读工具</p>
                </div>
            </div>
            <div class="nav-menu">
                <a href="/" class="nav-btn active"><i class="fas fa-book"></i>学拼音</a>
                <a href="/shengdiao.html" class="nav-btn"><i class="fas fa-music"></i> 读声调</a>
                <a href="/yinjiebiao.html" class="nav-btn"><i class="fas fa-table"></i> 音节表</a>
                <a href="/" class="nav-btn"><i class="fas fa-ellipsis-h"></i> 更多</a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <div class="main-content">
            <!-- Main Content Area -->
            <div class="main-area">
                <!-- 总进度条 -->
                <div class="total-progress">
                    <h3><i class="fas fa-chart-line"></i> 总体学习进度</h3>
                    <div class="progress-container">
                        <div class="progress-header">
                            <span>已学习 / 总数量</span>
                            <span id="total-percentage">0/63</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" id="total-progress" style="width: 0%"></div>
                        </div>
                    </div>
                </div>

                <!-- 声母表 Section -->
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-heading"></i> 声母表 (23个)
                        </h2>
                    </div>

                    <p class="section-desc py">
                        声母：23个,分别是：b p m f d t n l g k h j q x zh ch sh r z c s y w
                    </p>

                    <div class="pinyin-grid grid-4">
                        <!-- 声母按钮 -->
                        <button class="pinyin-btn pymp3" mp3="b.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">b</span>
                            <span class="pinyin-text">玻</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="p.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">p</span>
                            <span class="pinyin-text">坡</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="m.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">m</span>
                            <span class="pinyin-text">摸</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="f.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">f</span>
                            <span class="pinyin-text">佛</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="d.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">d</span>
                            <span class="pinyin-text">得</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="t.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">t</span>
                            <span class="pinyin-text">特</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="n.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">n</span>
                            <span class="pinyin-text">讷</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="l.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">l</span>
                            <span class="pinyin-text">勒</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="g.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">g</span>
                            <span class="pinyin-text">歌</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="k.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">k</span>
                            <span class="pinyin-text">科</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="h.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">h</span>
                            <span class="pinyin-text">喝</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="j.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">j</span>
                            <span class="pinyin-text">基</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="q.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">q</span>
                            <span class="pinyin-text">欺</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="x.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">x</span>
                            <span class="pinyin-text">希</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="zh.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">zh</span>
                            <span class="pinyin-text">知</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ch.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ch</span>
                            <span class="pinyin-text">蚩</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="sh.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">sh</span>
                            <span class="pinyin-text">思</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="r.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">r</span>
                            <span class="pinyin-text">日</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="z.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">z</span>
                            <span class="pinyin-text">资</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="c.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">c</span>
                            <span class="pinyin-text">雌</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="s.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">s</span>
                            <span class="pinyin-text">思</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="y.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">y</span>
                            <span class="pinyin-text">衣</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="w.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">w</span>
                            <span class="pinyin-text">乌</span>
                        </button>
                    </div>
                </div>

                <!-- 韵母表 Section -->
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-font"></i> 韵母表 (24个)
                        </h2>
                    </div>

                    <p class="section-desc py">
                        韵母共有24个：a o e i u v ai ei ui ao ou iu ie ve er an en in un vn ang eng ing ong
                    </p>

                    <div class="pinyin-grid grid-4">
                        <!-- 韵母按钮 -->
                        <button class="pinyin-btn pymp3" mp3="a.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">a</span>
                            <span class="pinyin-text">啊</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="o.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">o</span>
                            <span class="pinyin-text">喔</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="e.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">e</span>
                            <span class="pinyin-text">鹅</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="i.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">i</span>
                            <span class="pinyin-text">衣</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="u.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">u</span>
                            <span class="pinyin-text">乌</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="v.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ü</span>
                            <span class="pinyin-text">迂</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ai.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ai</span>
                            <span class="pinyin-text">哀</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ei.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ei</span>
                            <span class="pinyin-text">诶</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ui.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ui</span>
                            <span class="pinyin-text">威</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ao.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ao</span>
                            <span class="pinyin-text">熬</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ou.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ou</span>
                            <span class="pinyin-text">欧</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="iu.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">iu</span>
                            <span class="pinyin-text">优</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ie.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ie</span>
                            <span class="pinyin-text">耶</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ve.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">üe</span>
                            <span class="pinyin-text">约</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="er.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">er</span>
                            <span class="pinyin-text">耳</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="an.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">an</span>
                            <span class="pinyin-text">安</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="en.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">en</span>
                            <span class="pinyin-text">恩</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="in.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">in</span>
                            <span class="pinyin-text">因</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="un.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">un</span>
                            <span class="pinyin-text">温</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="vn.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ün</span>
                            <span class="pinyin-text">晕</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ang.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ang</span>
                            <span class="pinyin-text">昂</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="eng.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">eng</span>
                            <span class="pinyin-text">享</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ing.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ing</span>
                            <span class="pinyin-text">英</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ong.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ong</span>
                            <span class="pinyin-text">翁</span>
                        </button>
                    </div>

                    <div
                        style="margin-top: 25px; background: #f8f9fa; padding: 15px; border-radius: var(--border-radius);">
                        <p><strong>韵母分类：</strong></p>
                        <p>单韵母：a o e i u ü (6个)</p>
                        <p>复韵母：ai ei ui ao ou iu ie üe (8个)</p>
                        <p>特殊韵母：er (1个)</p>
                        <p>鼻韵母：an en in un ün ang eng ing ong (9个)</p>
                    </div>
                </div>

                <!-- 整体认读音节 Section -->
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <i class="fas fa-spell-check"></i> 整体认读音节 (16个)
                        </h2>
                    </div>

                    <p class="section-desc py">
                        整体认读章节共16个: zhi chi shi ri zi ci si yi wu yu ye yue yuan yin yun ying
                    </p>

                    <div class="pinyin-grid grid-4">
                        <!-- 整体认读按钮 -->
                        <button class="pinyin-btn pymp3" mp3="zhi1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">zhi</span>
                            <span class="pinyin-text">织</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="chi1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">chi</span>
                            <span class="pinyin-text">吃</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="shi1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">shi</span>
                            <span class="pinyin-text">狮</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ri1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ri</span>
                            <span class="pinyin-text">日</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="zi1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">zi</span>
                            <span class="pinyin-text">资</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ci1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ci</span>
                            <span class="pinyin-text">刺</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="si1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">si</span>
                            <span class="pinyin-text">丝</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="yi1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">yi</span>
                            <span class="pinyin-text">衣</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="wu1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">wu</span>
                            <span class="pinyin-text">屋</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="yu1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">yu</span>
                            <span class="pinyin-text">雨</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ye1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ye</span>
                            <span class="pinyin-text">椰</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="yue1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">yue</span>
                            <span class="pinyin-text">月</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="yuan1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">yuan</span>
                            <span class="pinyin-text">圆</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="yin1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">yin</span>
                            <span class="pinyin-text">印</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="yun1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">yun</span>
                            <span class="pinyin-text">云</span>
                        </button>
                        <button class="pinyin-btn pymp3" mp3="ying1.mp3">
                            <i class="fas fa-volume-up pinyin-icon floating"></i>
                            <div class="learned-indicator"><i class="fas fa-check"></i></div>
                            <span class="pinyin-char">ying</span>
                            <span class="pinyin-text">鹰</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="sidebar">
                <div class="info-card">
                    <h3><i class="fas fa-info-circle"></i> 学习指南</h3>
                    <ul class="info-list">
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <div>点击拼音卡片听取标准发音，每个拼音可重复学习</div>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <div>学习进度自动保存，下次访问可继续学习</div>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <div>建议从声母开始学习，再学习韵母</div>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <div>每天学习15分钟，一周掌握全部拼音</div>
                        </li>
                    </ul>
                </div>

                <div class="info-card">
                    <h3><i class="fas fa-book"></i> 拼音知识</h3>
                    <ul class="info-list">
                        <li>
                            <i class="fas fa-star"></i>
                            <div>声母：23个<br>分别是：b p m f d t n l g k h j q x zh ch sh r z c s y w</div>
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                            <div>韵母：24个<br>
                                单韵母6个：a o e i u ü<br>
                                复韵母8个：ai ei ui ao ou iu ie üe<br>
                                特殊韵母1个：er<br>
                                鼻韵母9个：an en in un ün ang eng ing ong
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                            <div>整体认读音节：16个<br>zhi chi shi ri zi ci si yi wu yu ye yue yuan yin yun ying</div>
                        </li>
                    </ul>
                </div>

                <div class="info-card">
                    <h3><i class="fas fa-link"></i> 快速导航</h3>
                    <div class="quick-links">
                        <a href="#" class="quick-link">
                            <i class="fas fa-book-open"></i>
                            <span>学拼音字母表</span>
                        </a>
                        <a href="#" class="quick-link">
                            <i class="fas fa-volume-up"></i>
                            <span>读声母</span>
                        </a>
                        <a href="#" class="quick-link">
                            <i class="fas fa-volume-up"></i>
                            <span>读韵母</span>
                        </a>
                        <a href="#" class="quick-link">
                            <i class="fas fa-volume-up"></i>
                            <span>读整认读音节</span>
                        </a>
                        <a href="#" class="quick-link">
                            <i class="fas fa-music"></i>
                            <span>学拼音声调</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>学习资源</h4>
                    <div class="footer-links">
                        <a href="#" class="footer-link">拼音字母表</a>
                        <a href="#" class="footer-link">声母学习</a>
                        <a href="#" class="footer-link">韵母学习</a>
                        <a href="#" class="footer-link">声调练习</a>
                        <a href="shizitianpinyin.html" class="footer-link">识字填拼音</a>
                        <a href="pinyinshizi.html" class="footer-link">拼音识字</a>
                        <a href="pinyinshiciyu.html" class="footer-link">拼音识词语</a>
                        <a href="yinianji.html" class="footer-link">拼音错题本</a>
                        <a href="yinianji.html" class="footer-link">小学一年级</a>
                        <a href="ernianji.html" class="footer-link">小学二年级</a>
                    </div>
                </div>

                <div class="footer-section">
                    <h4>实用工具</h4>
                    <div class="footer-links">
                        <a href="diandu.html" class="footer-link">拼音点读</a>
                        <a href="pinyinceshi.html" class="footer-link">拼音测试</a>
                        <a href="pinyinyouxi.html" class="footer-link">拼音游戏</a>
                        <a href="hanzipinyin.html" class="footer-link">汉字转拼音</a>
                        <a href="pinyinmigong.html" class="footer-link">拼音迷宫</a>
                        <a href="pinyinpeidui.html" class="footer-link">汉字拼音配对游戏</a>
                    </div>
                </div>

                <div class="footer-section">
                    <h4>友情链接</h4>
                    <div class="footer-links">
                        <a href="https://www.hanyupinyin.net" class="footer-link" target="_blank">汉语拼音官网</a>
                        <a href="https://youquhome.com/" class="footer-link" target="_blank">有趣网址之家</a>
                        <a href="https://www.bjtime.net/" class="footer-link" target="_blank">北京时间</a>
                        <a href="https://www.schulte.top/" class="footer-link" target="_blank">注意力训练游戏</a>
                        <a href="https://www.zitie123.cn/" class="footer-link" target="_blank">字帖训练</a>
                    </div>
                </div>
            </div>

            <div class="copyright">
                © 2023 HanYuPinYin.Net 汉语拼音在线学习平台 | 让汉语学习更简单
            </div>
        </div>
    </footer>

    <!-- Audio Player -->
    <audio id="player">
        您的浏览器不支持HTML5音频播放，请使用现代浏览器访问
    </audio>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = document.getElementById('player');
            const burl = '/i/pinyinmp3/';
            const progressPopup = document.querySelector('.progress-popup');

            // 初始化学习进度状态（存储所有拼音的学习状态）
            let studyStatus = {};

            // 从localStorage加载学习状态
            function loadStudyStatus() {
                const savedStatus = localStorage.getItem('pinyinStudyStatus');
                if (savedStatus) {
                    studyStatus = JSON.parse(savedStatus);
                    updateTotalProgress();
                }
            }

            // 保存学习状态到localStorage
            function saveStudyStatus() {
                localStorage.setItem('pinyinStudyStatus', JSON.stringify(studyStatus));
            }

            // 显示进度更新提示
            function showProgressPopup() {
                progressPopup.classList.add('show');
                setTimeout(() => {
                    progressPopup.classList.remove('show');
                }, 2000);
            }

            // 获取所有拼音按钮总数
            function getTotalPinyinCount() {
                return document.querySelectorAll('.pinyin-btn.pymp3').length;
            }

            // 更新总学习进度
            function updateTotalProgress() {
                const totalCount = getTotalPinyinCount();
                const learnedCount = Object.values(studyStatus).filter(Boolean).length;
                const percentage = Math.round((learnedCount / totalCount) * 100);

                // 更新进度条和文本
                document.getElementById('total-progress').style.width = `${percentage}%`;
                document.getElementById('total-percentage').textContent = `${learnedCount}/${totalCount}`;

                // 更新所有按钮的学习状态显示
                document.querySelectorAll('.pinyin-btn.pymp3').forEach(btn => {
                    const char = btn.querySelector('.pinyin-char').textContent;
                    if (studyStatus[char]) {
                        btn.classList.add('learned');
                    } else {
                        btn.classList.remove('learned');
                    }
                });
            }

            // 播放拼音发音并更新学习状态
            const pinyinButtons = document.querySelectorAll('.pymp3');
            pinyinButtons.forEach(button => {
                button.addEventListener('click', function () {
                    // 播放音频
                    const mp3 = this.getAttribute('mp3');
                    player.src = burl + mp3;
                    player.play();

                    // 添加点击效果
                    this.classList.add('active');
                    setTimeout(() => {
                        this.classList.remove('active');
                    }, 300);

                    // 更新学习状态
                    const char = this.querySelector('.pinyin-char').textContent;

                    // 如果尚未学习过，则标记为已学习
                    if (!studyStatus[char]) {
                        studyStatus[char] = true;
                        saveStudyStatus();
                        updateTotalProgress();
                        showProgressPopup();
                    }
                });
            });

            // 导航按钮效果
            const navButtons = document.querySelectorAll('.nav-btn');
            navButtons.forEach(button => {
                button.addEventListener('click', function () {
                    navButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 初始化页面
            loadStudyStatus();
        });
    </script>
</body>

</html>